<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="layout/jquery-ui.js"></script>
    <script type="text/javascript" src="layout/jquery.layout.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var myLayout=$("body").layout({
                applyDemoStyles: true
                ,spacing_open:8//边框的间隙
                ,togglerTip_open:"关闭"//pane打开时，当鼠标移动到边框上按钮上，显示的提示语
                //,togglerContent_open:"<img src='img/pro_down.png'/>"
                ,center__maskContents:true //允许iframe拖动
                ,west__slideTrigger_open:"mouseover" //鼠标移动展开左边
                ,west__spacing_closed:10 //左边关闭后预留大小
                ,hideTogglerOnSlide:true //允许隐藏
            });
            // 调用布局函数
            myLayout.sizePane("west", 250);

            $("#firstpane .menu_body:eq(0)").show();//默认展开第一个节点

            $("#firstpane p.menu_head").click(function(){
                $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().removeClass("current");
            });
            $("#secondpane .menu_body:eq(0)").show();
            $("#secondpane p.menu_head").mouseover(function(){
                $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().removeClass("current");
            });

            var overColor="#68b0d2";//移动背景颜色
            var selectColor="#d2c012";//选中背景颜色
            //添加左边导航事件
            $(".menu_body a").bind("click",function (curItem) {

                var item=curItem.currentTarget;
                //去除所有选中样式
                $("#firstpane a").each(function (ix,el) {
                    $(this).css("background-color","#ffffff");
                });
                //设置当前选中样式
                $(item).css("background-color",selectColor);
                $("#frmae").attr("src",item.href+"?title="+escape(item.innerText));
                //防止执行a标签href跳转
                return false;
            });

            //添加左边导航事件
            /*$(".menu_body a").bind("mouseover",function (curItem) {
                var item=curItem.currentTarget;
                var seColor=$(item).css("background-color");
                if(seColor!=selectColor) {
                    $(item).css("background-color", overColor);
                }
            });*/
            /* $("#firstpane .menu_head").click(function() {
             $(this).toggleClass("current").next("div.menu_body").slideToggle(300);
             $(this).siblings().removeClass("current").next("div.menu_body").slideUp("fast");
             });*/
        });
    </script>

    <style type="text/css">
        .ui-layout-pane {
            background: #dfe8f6;
            border:     0px solid #8db2e3;
            padding:    10px;
            overflow:   auto;
        }
    </style>
    <style type="text/css">
        body{
            text-align: left;
        }
        .menu_list{margin:0px;width:185px;}
        .menu_head{width:185px;height:47px;line-height:47px;padding-left:38px;font-size:14px;color:#525252;cursor:pointer;border:1px solid #e1e1e1;position:relative;font-weight:bold;background:#f1f1f1 url(img/pro_left.png) center right no-repeat;margin:0;}
        .menu_list .current{background:#f1f1f1 url(img/pro_down.png) center right no-repeat;}
        .menu_body{width:223px;height:auto;overflow:hidden;line-height:38px;border-left:1px solid #e1e1e1;backguound:#fff;border-right:1px solid #e1e1e1;}
        .menu_body a{display:block;width:223px;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
        .menu_body a:hover{text-decoration:none;background-color: #68b0d2;}
    </style>
</head>
<body>
<iframe id="frmae" class="ui-layout-center" style="width: 99%; height: 99%" frameborder="0" src="">

</iframe>

<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<!--<div class="ui-layout-east">East</div>-->
<div class="ui-layout-west" >
    <div id="firstpane" class="menu_list">
        <p class="menu_head current">哲学</p>
        <div style="display:block" class=menu_body >
            <a href="layoutSub.jsp" >科学技术哲学</a>
            <a href="layoutSub.jsp">宗教学</a>
            <a href="layoutSub.jsp">美学</a>
            <a href="layoutSub.jsp">伦理学</a>
        </div>
        <p class="menu_head">经济学</p>
        <div style="display:none" class=menu_body >
            <a href="layoutSub.jsp">应用经济学</a>
            <a href="layoutSub.jsp">理论经济学</a>
            <a href="layoutSub.jsp">国民经济学</a>
        </div>
        <p class="menu_head">法学</p>
        <div style="display:none" class=menu_body >
            <a href="layoutSub.jsp">马克思主义基本原理</a>
            <a href="layoutSub.jsp">马克思主义发展史</a>

        </div>
        <p class="menu_head">教育学</p>
        <div style="display:none" class=menu_body >
            <a href="layoutSub.jsp">体育人文社会学</a>
            <a href="layoutSub.jsp">体育教育训练学</a>
            <a href="layoutSub.jsp">民族传统体育学</a>
            <a href="layoutSub.jsp">发展与教育心理学</a>
            <a href="layoutSub.jsp">应用心理学</a>
        </div>
        <p class="menu_head">工学</p>
        <div style="display:none" class=menu_body >
            <a href="layoutSub.jsp">一般力学与力学基础</a>
            <a href="layoutSub.jsp">固体力学</a>
            <a href="layoutSub.jsp">流体力学</a>
            <a href="layoutSub.jsp">工程力学</a>
            <a href="http://sc.chinaz.com/" target="_blank">站长素材</a>
        </div>
    </div>
</div>


</body>
</html>
